import React from "react";
import { Carousel } from "antd";
import "./index.css";

const contentStyle: React.CSSProperties = {
  height: "300px",
  color: "#fff",
  lineHeight: "300px",
  textAlign: "center",
  background: "#e9e9ed",
  margin: 0,
  padding: 0,
  overflow: "hidden"
};

const App: React.FC = () => {
  return (
    <Carousel autoplay className="as-carousel">
      <div>
        <h3 style={contentStyle}>
          <img
            src={require("./images/1.png")}
            style={{ borderRadius: "5px" }}
          />
        </h3>
      </div>
      <div>
        <h3 style={contentStyle}>
          <img
            src={require("./images/2.png")}
            style={{ borderRadius: "5px" }}
          />
        </h3>
      </div>
      <div>
        <h3 style={contentStyle}>
          <img
            src={require("./images/3.png")}
            style={{ borderRadius: "5px" }}
          />
        </h3>
      </div>
    </Carousel>
  );
};

export default App;
